<template>
    <a-select v-model:value="value"  style="width: 200px" >
        <a-select-option :value="item" v-for="item in teacherDeptname" >{{item}}</a-select-option>

    </a-select>

    <a-button type="primary"  @click="getTeacherList">查询</a-button>

    <a-table :columns="columns" :data-source="teacherListDate" bordered>
        <template #bodyCell="{ column, text, record }">
            <template v-if="['name', 'age', 'address'].includes(column.dataIndex)">
                <div>
                    <a-input
                            v-if="editableData[record.key]"
                            v-model:value="editableData[record.key][column.dataIndex]"
                            style="margin: -5px 0"
                    />
                    <template v-else>
                        {{ text }}
                    </template>
                </div>
            </template>
            <template v-else-if="column.dataIndex === 'operation'">
                <div class="editable-row-operations">
          <span v-if="editableData[record.key]">
            <a-typography-link @click="save(record.key)">Save</a-typography-link>
            <a-popconfirm title="Sure to cancel?" @confirm="cancel(record.key)">
              <a>Cancel</a>
            </a-popconfirm>
          </span>
                    <span v-else>
<!--            <a @click="edit(record.key)">Edit</a>-->
                        <a-button type="link"  @click="reset(record.teacherNo)">重置密码</a-button>
                        <a-button type="link"  @click="updateStudent(record)">修改</a-button>
                        <a-button type="link"  @click="deleteStudent(record.teacherNo)">删除</a-button>
          </span>
                </div>
            </template>
        </template>
    </a-table>


  <!--修改学生信息-->
    <div>

        <a-modal v-model:visible="visible" width="800px" title="修改老师信息" @ok="handleOk">
            <a-form
                    :model="formState"
                    v-bind="layout"
                    name="nest-messages"

                    @finish="handleOk"
            >
                <a-form-item name="teacherName" label="教师姓名" >
                    <a-input v-model:value="formState.teacherName" />
                </a-form-item>
                <a-form-item name="teacherGender" label="性别" >
                    <a-input v-model:value="formState.teacherGender" />
                </a-form-item>
                <a-form-item name="teacherAddress" label="家庭地址" >
                    <a-input v-model:value="formState.teacherAddress" />
                </a-form-item>
                <a-form-item name="teacherDeptname" label="院系" >
                    <a-input v-model:value="formState.teacherDeptname" />
                </a-form-item>
                <a-form-item name="teacherStatus" label="状态" >
                    <a-input v-model:value="formState.teacherStatus" />
                </a-form-item>
                <a-form-item name="teacherRemarks" label="备注" >
                    <a-input v-model:value="formState.teacherRemarks" />
                </a-form-item>
            </a-form>
        </a-modal>
    </div>
</template>

<script setup lang="ts">
import {onMounted, reactive, ref, UnwrapRef} from "vue";
import myAxios from "../../plugins/myAxios";
import {message} from "ant-design-vue";
import {cloneDeep, set} from "lodash-es";
import dayjs from "dayjs";




const studentList = ref([])
const value = ref()
const value1 = ref()


const teacherListDate = ref()
const getTeacherList = async () => {
    const res = await myAxios.post("/adminManageInfos/teachers",{
        teacherDeptname:value.value
    })
    if (res.data){
        teacherListDate.value = res.data
        teacherListDate.value = teacherListDate.value.map(item=>{
            switch (item.studentStatus){
                case 1:
                    item.studentStatus = '在校'
                    break
                case 0:
                    item.studentStatus = '离校'
                    break

            }
            item.arriveDate = dayjs(item.arriveDate).format('YYYY-MM-DD')
            item.teacherBirthdate = dayjs(item.teacherBirthdate).format('YYYY-MM-DD')
            return item
        })
    }else {
        message.error(res.message)
    }
}
onMounted(()=>{
    getTeacherDeptname()
})
const teacherDeptname = ref()
const getTeacherDeptname = async () =>{
    const res = await myAxios.get("/adminManageInfos/getDepts")
    if (res.data){
        teacherDeptname.value = res.data
    }else {
        message.error(res.message)
    }
}
const studentClassNo = ref()



const columns = [

    {
        title: '序号',
        dataIndex: 'id',
        width: '6%',
    },
    {
        title: '教师号',
        dataIndex: 'teacherNo',
        width: '10%',
    },
    {
        title: '教师姓名',
        dataIndex: 'teacherName',
        width: '7%',
    },
    {
        title: '性别',
        dataIndex: 'teacherGender',
        width: '5%',
    },
    {
        title: '家庭地址',
        dataIndex: 'teacherAddress',
        width: '10%',
    },
    {
        title: '出生年月',
        dataIndex: 'teacherBirthdate',
        width: '10%',
    },
    {
        title: '院系',
        dataIndex: 'teacherDeptname',
        width: '10%',
    },
    {
        title: '到岗时间',
        dataIndex: 'arriveDate',
        width: '10%',
    },
    {
        title: '状态',
        dataIndex: 'teacherStatus',
        width: '10%',
    },
    {
        title: '备注',
        dataIndex: 'teacherRemarks',
        width: '5%',
    },
    {
        title: '操作',
        dataIndex: 'operation',
        width: '10%',
    },

];

interface DataItem {
    id: number;
    teacherNo: string;
    teacherName: string;
    teacherGender: string;
    teacherAddress: string;
    teacherBirthdate: string;
    teacherDeptname: string;
    arriveDate: string;
    teacherStatus: number;
    teacherRemarks: string;

}
const dataSource = ref(teacherListDate.value);
const editableData: UnwrapRef<Record<string, DataItem>> = reactive({});

const edit = (studentNo: string) => {
    editableData[studentNo] = cloneDeep(dataSource.value.filter(item => studentNo === item.studentNo)[0]);
};
const save = async (studentNo: string) => {
    console.log(studentNo)
    Object.assign(dataSource.value.filter(item => studentNo === item.studentNo)[0], editableData[studentNo]);
    delete editableData[studentNo];
    // console.log(item)
    // const res = await myAxios.post("/teacher/saveScores",{
    //     ...item
    // })
    // if (res.data){
    //     message.success("操作成功")
    // }else {
    //     message.error("操作失败")
    // }
};
const cancel = (score: string) => {
    delete editableData[score];
};


const updateStudent = async (item:any) => {
    visible.value = true
    formState.value = item
    console.log(item)
}


/**
 * 修改老师信息
 */
const visible = ref(false)
const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
};
const formState = ref();
const handleOk = async () => {
    // switch (formState.value.studentStatus){
    //     case '在校':
    //         formState.value.studentStatus = 1
    //         break
    //     case '离校':
    //         formState.value.studentStatus = 2
    //         break
    //     case '休学':
    //         formState.value.studentStatus = 3
    //         break
    // }
    // console.log(formState.value)
    const res = await myAxios.post("/adminManageInfos/updateTeacher",{
        ...formState.value
    })
    if (res.code===0){
        message.success("修改成功")
        visible.value = false
    }else {
        message.error(res.message)
    }
}

const deleteStudent = async (teacherNo:any) => {
    // const param = []
    // param.push(teacherNo)
    // const res = await myAxios.post("/adminManageInfos/delete/user",{
    //     userNos:JSON.stringify(param)
    // })
    // if (res.code===0){
    //     message.success('删除成功')
    // }else {
    //     message.error(res.message)
    // }
    message.success("此功能尚未开发！")
}
const reset = async (teacherNo:any) => {
    const res = await myAxios.post("/adminManageInfos/reset",{
        userNo:teacherNo
    })
    if (res.code===0){
        message.success("重置成功")
    }else {
        message.error(res.message)
    }
}

</script>

<style scoped>

</style>